<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>豪哥的个人网站</title>
    <!-- Bootstrap core CSS -->
    <link href="../static/asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Custom styles for this template -->
    <link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }

        #t select {
            width: 150px;
            height: 40px;
            margin-left: 20px;
            font-size: 24px;
        }
    </style>
</head>

<body>
<div th:replace="sidbar::#topbar"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="sidbar::#sbar"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="chartjs-size-monitor"
                 style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                <div class="chartjs-size-monitor-expand"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                </div>
                <div class="chartjs-size-monitor-shrink"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>
            <!--            添加类型-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="exampleModalLabel">添加类型</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group" id="form1">
                            </div>
                            <div id="id" hidden></div>
                            <div class="form-group">
                                <label for="typeName" class="control-label">类型名称:</label>
                                <textarea class="form-control" id="typeName" placeholder="输入名称"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addType()">
                                    添加
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--            删除修改类型-->
            <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog" aria-labelledby="myModaldel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="example">删除修改类型</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group" id="buttons">

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--            设置部门-->
            <div class="modal fade" id="myModalG" tabindex="-1" role="dialog" aria-labelledby="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">设置部门</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                            </div>
                            <div class="form-group">
                                <label for="groupName" class="control-label">部门名称:</label>
                                <textarea class="form-control" id="groupName" placeholder="输入部门名称"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="typeName" class="control-label">部门简介:</label>
                                <textarea class="form-control" id="groupProfile" placeholder="输入简介"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="setGroup()">
                                    设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--            修改用户特殊信息：部门职位信息-->
            <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">设置部门和职位</h4>
                        </div>
                        <div class="modal-body">
                            <h3 class="modal-title" id="userName"></h3>
                            <hr>
                            <div class="form-group" id="form3" style="margin: 30px;font-size: large">
                                选择部门:
                                <select id="setGroup" name="setGroup"></select>
                            </div>
                            <hr>
                            <div class="form-group">
                                <label for="typeName" class="control-label">职位名称:</label>
                                <textarea class="form-control" id="work"></textarea>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="setGW()">
                                    设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="jumbotron">
                <h3 th:text="支付类型操作"></h3>
                <button type="button" class="btn-success" data-toggle="modal" data-target="#myModal" onclick="idN=0">
                    添加支付类型
                </button>
                <button type="button" class="btn-success" data-toggle="modal" data-target="#myModaldel">
                    删除修改类型
                </button>
                <hr>
                <h3 th:text="部门操作"></h3>
                <button type="button" class="btn-success" data-toggle="modal" data-target="#myModalG" onclick="  $('#groupName').empty();
            $('#groupProfile').empty();groupId=0">
                    添加部门
                </button>
                <select id="group2" name="group" style="font-size: 30px;margin-left: 30px"></select>
                <button type="button" class="btn-success" data-toggle="modal" data-target="#myModalG"
                        onclick="getGroup(groupId=$('#group2 option:selected').val())">
                    修改部门
                </button>
                <hr>
                <h3 th:text="员工操作"></h3>
                <form class="form-horizontal" role="form" method="post" action="">
                    <div id="t">
                        <label for="group">部门</label>
                        <select id="group" name="group" onchange="loadJson2()"></select>
                        <label for="user">用户</label>
                        <select id="user" name="user"></select>
                        <button id="setGW" type="button" class="btn-success" data-toggle="modal" data-target="#userModal"
                                onclick="getMsgUser($('#user option:selected').text())">
                            设置当前用户特殊信息
                        </button>
                    </div>

                </form>
            </div>


        </main>
    </div>
</div>

<script>

    var datas;
    getType();
    var idN = 0;
    var groupId = 0;
    getGroup();
    $.ajax({
        type: "get",
        url: "user/getGroupPeople",
        success: function (data) {
            datas = data;
            loadJson1();
            loadJson2()
        }
    });

    // 获取用户的部门和职位
    function getMsgUser(name) {
        $.ajax({
            type: "get",
            url: "user/getGWByUserId",
            data: {"userId": $('#user').val()},
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else{
                    $("#work").val(data.data.work)
                    $("#setGroup").val(data.data.groupId)
                    $("#userName").html("用户名字：" + name)

                }
            }
        });
    }

    // 设置用户的部门和职位
    function setGW() {
        var userId = $('#user option:selected').val();
        if (userId == undefined ) {
            userId = 0;
        }
        $.ajax({
            type: "post",
            url: "user/updateByRoot",
            data: {"userId": userId, "groupId": $('#setGroup').val(), "work": $('#work').val()},
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    alert(data.status_desc)
                }
            },
            error: function (data) {
                alert('服务器内部错误！');
            },
        });
    }

    function getGroup() {
        $("#setGroup").empty();
        if (groupId == 0) {
            $("#group2").empty();
        }
        $.ajax({
            type: "get",
            url: "user/getGroup",
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    for (var i = 0; i < data.data.length; i++) {
                        var selector = '<option  value="' + data.data[i].id + '" title="' + data.data[i].profile + '">' + data.data[i].name + '</option>';
                        $("#setGroup").append(selector);
                        $("#group2").append(selector);
                        if (data.data[i].id == groupId) {
                            $('#groupName').html(data.data[i].name);
                            $('#groupProfile').html(data.data[i].profile);
                        }
                    }
                }
            },
            error: function (data) {
                alert('服务器内部错误！');
            },
        });
    }

    function loadJson1() {
        var group = Object.keys(datas.data);
        for (var i = 0; i < group.length; i++) {

            // 部门名字
            var html = '<option>' + group[i] + '</option>';
            $("#group").append(html);
        }
    }

    function loadJson2() {
        $("#user").empty()
        var group = Object.keys(datas.data);
        for (var i = 0; i < group.length; i++) {
            /*检测现在所选定的值*/
            var select = ($("#group option:selected").text());
            var user = datas.data[group[i]];
            if (group[i] == select) {
                for (var j = 0; j < user.length; j++) {
                    var html = '<option value="' + user[j].key + '">' + user[j].value + '</option>';
                    $("#user").append(html);
                }
            }
        }
    };


    function close(num) {
        if (num == 1) {
            $('#myModal').modal('hide')
        }
        if (num == 2) {
            alert(yes)
            $('#myModaldel').modal('hide')
        }
        if (num == 3) {
            $('#myModal').modal('hide')
            $('#myModaldel').modal('hide')
        }
    };

    function addType() {
        var dataEL = {'name': $('#typeName').val(), 'id': idN};
        $.ajax({
            type: "post",
            url: "pay/setPayType",
            data: dataEL,
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    getType();
                    alert(data.status_desc)
                }
                close(1);
            },
            error: function (data) {
                alert('服务器内部错误！');
            },
        });
    }

    function delType(id) {
        var dataEL = {'id': id};
        $.ajax({
            type: "post",
            url: "pay/delPayType",
            data: dataEL,
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    getType();
                    alert(data.status_desc)
                }
            },
            error: function () {
                alert('服务器内部错误！');
            },
        });
    }

    function getType() {
        $('#buttons').empty()
        $.ajax({
            type: "get",
            url: "pay/getPayType",
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    var buttons = $('#buttons');
                    for (var i = 0; i < data.data.length; i++) {
                        buttons.append('<button class="btn btn-primary" type="button" style="margin-left:  30px;margin-bottom:  10px;border: #0c5460 solid 1px">' +
                            data.data[i].name + '<button class="btn-danger"  onclick="delType(' + data.data[i].id + ')" title="删除将影响已有的数据">x</button>' +
                            '<button type="button" class="btn-warning" data-toggle="modal" data-target="#myModal"   data-dismiss="modal" onclick=" idN=' + data.data[i].id + '">' +
                            '<span class="glyphicon glyphicon-cog"  ></span></button></button>');
                    }
                    ;
                    $("#form2").append(buttons);
                }

            },
            error: function (data) {
                alert('服务器内部错误！');
            },
        });
    }


    function setGroup() {
        var dataEL = {'name': $('#groupName').val(), 'profile': $('#groupProfile').val(), 'id': groupId};
        $.ajax({
            type: "post",
            url: "user/setGroup",
            data: dataEL,
            success: function (data) {
                if (data.code == 201) {
                    alert(data.status_desc)
                } else {
                    getGroup();
                    alert(data.status_desc)
                }
            },
            error: function (data) {
                alert('服务器内部错误！');
            },
        });
    }

</script>
</body>

</html>
